<template>
  <div>
    <div class="wrap">
      <div
        class="list-group-wrap"
        :class="{ roll_animation: rollState == 'start' }"
        :style="{
          transform: `translate3d(${translateY}px,0,0)`,
          'transition-duration': duration + 'ms',
        }"
      >
        <div
          v-for="(item, index) in shaftList"
          :key="index"
          :style="{
            background: item.color,
          }"
          class="list-group-item"
          :class="{ item_actived: activedCurrentIndx === index }"
        ></div>
        <div></div>
        <!-- <div class="list-group-wrap"></div> -->
      </div>
    </div>
    <div style="margin-left: 65px; margin-top: 15px">
      <el-button @click="roll({ results: 'red' })"> 红色抽奖</el-button>
      <el-button @click="roll({ results: 'green' })"> 绿色抽奖</el-button>
      <el-button @click="roll({ results: 'blue' })"> 蓝色抽奖</el-button>
      <el-button @click="roll({ results: 'yellow' })"> 黄色抽奖</el-button>
      <el-button @click="roll({ results: 'orange' })"> 橙色抽奖</el-button>
      <el-button @click="roll({ results: 'gray' })"> 抽奖</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "WxTxtCheckConfigPage",
  data() {
    return {
      prizeList: [
        { color: "red" },
        { color: "green" },
        { color: "blue" },
        { color: "yellow" },
        { color: "orange" },
        { color: "gray" },
      ],
      // 位置
      translateY: 0,
      // 摇奖状态
      rollState: "stop",
      // 总的摇奖时间 单位毫秒
      duration: 4000,
      // 滚动列表
      shaftList: [],
      // 高亮中奖的奖品的索引
      activedCurrentIndx: -1,
      // 当前滚动的索引
      currentIndex: -1,
    };
  },
  mounted() {
    this.init({});
  },
  methods: {
    // 初始化
    init({
      // 默认显示奖品
      defaultResults = "blue",
      // 滚动延迟 默认500ms
      // delay = 500,
      // 滚动时间 从开始滚动到所有滚动结束 默认4000ms
      duration = 3500,
    }) {
      // 最低4秒
      if (duration < 4000) {
        duration = 4000;
      }
      // 总时长要扣除延迟滚动那一部分时间
      // duration = duration - delay * 2;

      let shaftList = [];
      this.shaftList = this.shuffle(this.prizeList);
      console.log(shaftList, "shaftList123");
      // this.setTranslateY(defaultResults);
      // setTimeout(() => {
      //   this.stop();
      // }, 50);
      this.$nextTick(function () {
        this.duration = duration;
        // this.delay = delay;
      });
    },
    // 打乱顺序
    shuffle(arr) {
      let tmpArr = JSON.parse(JSON.stringify(arr));
      // for (let i = 1; i < tmpArr.length; i++) {
      //   const random = Math.floor(Math.random() * (i + 1));
      //   [tmpArr[i], tmpArr[random]] = [tmpArr[random], tmpArr[i]];
      // }
      // 保证最低有40个奖品列表，保证滚动摇奖时候效果
      // 如果抽奖总时长比较长时候，请适当调大40
      let len = Math.ceil(36 / arr.length); //倍数
      let tmpShaft = [];
      while (len > 0) {
        tmpShaft.push(...tmpArr);
        len--;
      }
      return JSON.parse(JSON.stringify(tmpShaft));
    },
    // 设定位置
    setTranslateY(results) {
      let res = [];
      const groupPrizeLength = this.prizeList.length 
      // 倒序遍历奖品列表，找出开奖结果的最靠后的下标
      for (let k = this.shaftList.length - 1 - groupPrizeLength; k >= 0; k--) {
        if (this.shaftList[k].color == results) {
          console.log("asdas");
          res.push(JSON.parse(JSON.stringify(this.shaftList[k])));
          // 延迟滚动
          console.log(k, "k123");
          console.log(k * -66, "k * -10012");
          this.currentIndex = k;
          this.translateY = (k - 1) * -66.4;
          console.log(this.translateY, "this.translateY123");
          break;
        }
      }
      return res;
    },
    // 摇奖
    roll({
      // 开奖结果
      results = null,
      // 开奖回调
      success = null,
    }) {
      if (this.rollState == "start") {
        return console.warn("正在抽奖哦！");
      }
      this.activedCurrentIndx = -1;
      this.currentIndex = -1;
      console.log("jinlaile1");
      // this.duration = 4000;
      this.rollState = "start";
      // 滚动位置
      let res = this.setTranslateY(results);
      setTimeout(() => {
        typeof success == "function" && success(res);
        this.stop();
      }, this.duration + 1000);
    },
    stop() {
      this.rollState = "stop";
      // this.duration = 0;
      this.$nextTick(function () {
        console.log(this.shaftList, "this.shaftList123");
        console.log(this.prizeList.length, "this.shaftList123");
        console.log(
          (this.shaftList.length / this.prizeList.length - 1) *
            this.prizeList.length,
          "asdas"
        );
        const diffValue =
          (this.shaftList.length / this.prizeList.length - 3) *
          this.prizeList.length;

        let tolerance = diffValue * 66.4; //公差
        // 停止滚动之后，位移到 最前面/最后面 对应位置，为下一次摇奖留下滚动空间，实现多次摇奖无缝滚动效果
        let topY = this.translateY + tolerance;
        this.translateY = topY;
        this.activedCurrentIndx = this.currentIndex - diffValue;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  margin-top: 15px;
  margin-left: 30px;
  width: 209px;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: auto;
}

.list-group-wrap {
  display: flex;
  align-items: center;
  // position: absolute;
  width: 2400px;
  transition-property: none;
  transition-duration: 0s;

  padding: 10px;
  .list-group-item {
    width: 50%;
    height: 50px;
    & + .list-group-item {
      margin-left: 10px;
    }
    &.item_actived {
      border: 3px dashed #c5821c;
    }
  }
  &.roll_animation {
    transition-property: transform;
    transition-timing-function: cubic-bezier(1, 0, 0.1, 1);
  }
}
</style>
